<template>
    <div  class="nav-bar">
      <span v-for="navItem in navItemList" :key="navItem.path" >
         <router-link  class="nav-item"  :to="navItem.path">
            {{navItem.meta.title}}
         </router-link>
      </span>
  </div>
</template>

<script>
import menus from '@/views/home/config/menu-config'

export default {
  name: 'NavBar',
  data () {
    return {
      navItemList: menus
    }
  }

}
</script>

<style  lang="stylus" scoped>
  .nav-bar
    display: flex;
    .nav-item
      margin: 6px;
      color: #9E9E9E;
      transition: all .3s linear;
    .nav-item:hover
      color #4caf50

</style>
